<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 这是个iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 全屏显示-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 不要让设备识别电话号码和邮箱地址-->
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <!-- DNS预解析-->
    <meta http-equiv="x-dns-prefetch-control" content="on">

    <link href="../css/common/mui.min.css" rel="stylesheet">
    <link href="../css/common/reset.css" rel="stylesheet">
    <link href="../css/common/common.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/evaluate-modal.css" rel="stylesheet">
    
    <script src="../js/zepto-1.1.4.min.js"></script>
    <script src="../js/mui.min.js"></script>
    
    <title>特训报告</title>
    
  </head>
  <body>
    

    <!-- 弹窗 -->
    <div class="mask">
        
        <!-- 转训规划当天有课 -->
        <div class="mask-content">
            <!-- <div class="mui-scroll-wrapper"> -->
                <div class="warpper">
                    <div class="header">
                        <h3>你觉得内训师如何？</h3>
                        <div class="star-box">
                           <div class="star active"></div>
                           <div class="star active"></div>
                           <div class="star active"></div>
                           <div class="star active"></div>
                           <div class="star empty"></div>                           
                        </div>
                    </div>
                    <div class="question-wrapper">

                        <div class="answer-question-item">
                            <p class="question">你觉得内训师如何？</p>
                            <div class="answer-box">
                                <div class="answer-radio-item active">
                                    <div class="radio"></div>
                                    <span class="answer-text">A、制式报表</span>
                                </div>
                                <div class="answer-radio-item">
                                    <div class="radio"></div>
                                    <span class="answer-text">B、自定义报表</span>
                                </div>
                                <div class="answer-radio-item">
                                    <div class="radio"></div>
                                    <span class="answer-text">C、自定义报表</span>
                                </div>
                                <div class="answer-radio-item">
                                    <div class="radio"></div>
                                    <span class="answer-text">D、自定义报表</span>
                                </div>
                            </div>
                        </div>

                        <div class="answer-question-item">
                            <p class="question">你觉得内训师如何？</p>
                            <div class="answer-box">
                                <div class="answer-checkbox-item active">
                                    <div class="checkbox"></div>
                                    <span class="answer-text">A、制式报表</span>
                                </div>
                                <div class="answer-checkbox-item">
                                    <div class="checkbox"></div>
                                    <span class="answer-text">B、自定义报表</span>
                                </div>
                                <div class="answer-checkbox-item">
                                    <div class="checkbox"></div>
                                    <span class="answer-text">C、自定义报表</span>
                                </div>
                                <div class="answer-checkbox-item">
                                    <div class="checkbox"></div>
                                    <span class="answer-text">D、自定义报表</span>
                                </div>
                            </div>
                        </div>

                        <div class="answer-question-item">
                            <p class="question">你觉得内训师如何？</p>
                            <div class="answer-box">
                                <div class="answer-radio-item active">
                                    <div class="radio"></div>
                                    <span class="answer-text">A、制式报表</span>
                                </div>
                                <div class="answer-radio-item">
                                    <div class="radio"></div>
                                    <span class="answer-text">B、自定义报表</span>
                                </div>
                                <div class="answer-radio-item">
                                    <div class="radio"></div>
                                    <span class="answer-text">C、自定义报表</span>
                                </div>
                                <div class="answer-radio-item">
                                    <div class="radio"></div>
                                    <span class="answer-text">D、自定义报表</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            <!-- </div> -->
            <div class="btn-wrap">
                <a class="cancel" href="javascript:;">取消</a>
                <a class="submit" href="javascript:;">提交</a>
            </div>
        </div>
    </div>

    <div class="toast">
        提交成功
    </div>

    <script src="../js/remset.js"></script>
    <script>
        $('.cancel').click(function() { 
            $('.mask').hide() 
        })

        $('.submit').click(function() { 
            $('.toast').show() 
            setTimeout(function() {
               $('.toast').hide() 
            }, 1000)
        })

        // 点击星星
        $('.star').click(function() {
            var index = $(this).index()
            for(let i = 0; i < 5; i ++) {
                $('.star').eq(i).removeClass('active').removeClass('empty')
                if(index < i) {
                    $('.star').eq(i).addClass('empty')
                }else {
                    $('.star').eq(i).addClass('active')
                }
            }
        })

        // 单选点击
        $('.answer-radio-item').click(function() {
            $(this).addClass('active').siblings().removeClass('active')
        })
        
        // 复选点击
        $('.answer-checkbox-item').click(function() {
            $(this).hasClass('active') ? $(this).removeClass('active') : $(this).addClass('active')
        })
    </script>
  </body>
</html>